import 'package:azlistview/azlistview.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:magic_car/UI/Loading.dart';
import 'package:magic_car/util/HttpHelper.dart';
import 'package:magic_car/util/colors.dart';
import 'package:magic_car/util/config.dart';
import 'package:magic_car/util/progress.dart';

class BrandSelectRoute extends StatefulWidget {
  final Map param;
  BrandSelectRoute(this.param);
  @override
  State<StatefulWidget> createState() {
    return new _BrandSelectRouteState(this.param);
  }
}

class _BrandSelectRouteState extends State<BrandSelectRoute> {
  // List<CityInfo> _cityList = List();
  // List<CityInfo> _hotCityList = List();
  final Map param;
  _BrandSelectRouteState(this.param);
  List BrandList = List();
  List hotList = List();
  List<double> heights = List();
  ScrollController scrollController = new ScrollController();

  int _suspensionHeight = 40;
  int _itemHeight = 50;
  String _suspensionTag = "";

  LoadingPage loadpage;
  bool loaddata = false;

  BuildContext thisContext;
  final spinkit = SpinKitRotatingCircle(
    color: Colors.white,
    size: 50.0,
  );
  @override
  void initState() {
    super.initState();
    scrollController.addListener(() {
      double position = scrollController.offset.toDouble();
      // int index = _computerIndex(position);
      // setState(() {
      //  // defaultIndex = index;
      // });
    });
    loadData();
  }
  // int _computerIndex(double position) {
  //   if (widget.data != null) {
  //     for (int i = 0; i < widget.data.length - 1; i++) {
  //       double pre = _computerIndexPosition(i);
  //       double next = _computerIndexPosition(i + 1);
  //       if (position > pre && position < next) {
  //         return i;
  //       }
  //     }
  //   }
  //   return 0;
  // }

  // double _computerIndexPosition(int index) {
  //   int n = 0;
  //   if (widget.data != null) {
  //     for (int i = 0; i < index; i++) {
  //       n += (widget.data[i]['userList'].length).toInt();
  //     }
  //   }
  //   return n * widget.itemHeight + (index + 1) * widget.suspensionHeight;
  // }
  _showLoading() {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return new Dialog(
            child: new Container(
              width: 150,
              height: 150,
              child: new Center(
                  child: new Container(
                width: 150,
                height: 150,
                color: Colors.black38,
                child: SpinKitCircle(
                  color: Colors.white,
                  size: 50,
                ),
              )),
            ),
          );
        }).then((val) {
      //用户点击
    });
  }

  void loadData() async {
    // LoadingPage loadpage = new LoadingPage(context);
    // loadpage.show();
    // _showLoading();
    Map<String, String> map = new Map();

    HttpHelper.post(HttpHelper.API_Brand, (data) async {
      //loadpage.close();
      if (data != null) {
        print(data);
        //Toast.show(data["msg"], context);

        if (data["code"].toString() == "1") {
          List temp = data["info"];
          //  //           print('1111');
          //    // List temp = data["info"];
          //     List<dynamic> temp1 = [{'tag': 'A','userList':[]},
          //     {'tag': 'B','userList':[]},
          //     {'tag': 'C','userList':[]},
          //     {'tag': 'D','userList':[]},
          //     {'tag': 'E','userList':[]},
          //     {'tag': 'F','userList':[]},
          //     {'tag': 'G','userList':[]},
          //     {'tag': 'H','userList':[]},
          //     {'tag': 'I','userList':[]},
          //     {'tag': 'J','userList':[]},
          //     {'tag': 'K','userList':[]},
          //     {'tag': 'L','userList':[]},
          //     {'tag': 'M','userList':[]},
          //     {'tag': 'N','userList':[]},
          //     {'tag': 'O','userList':[]},
          //     {'tag': 'P','userList':[]},
          //     {'tag': 'Q','userList':[]},
          //     {'tag': 'R','userList':[]},
          //     {'tag': 'S','userList':[]},
          //     {'tag': 'T','userList':[]},
          //     {'tag': 'U','userList':[]},
          //     {'tag': 'V','userList':[]},
          //     {'tag': 'W','userList':[]},
          //     {'tag': 'X','userList':[]},
          //     {'tag': 'Y','userList':[]},
          //     {'tag': 'Z','userList':[]},
          //     ];
          //     List tempre=[];
          //     for (var i = 0; i < temp.length; i++) {
          //       //print('111112343434');
          //        var item = temp[i];

          //         for (var tag in temp1) {
          //           // print(tag["tag"]);
          //           if (tag["tag"] == item["initials"]) {
          //             tag["userList"].add(item);
          //           }
          //         }
          //       //}

          //     }
          //loadpage.close();
          setState(() {
            BrandList = temp;
            hotList = hotList;
            loaddata = true;
          });
        }
      }
    }, params: map);
  }

  Widget layout() {
    List<Widget> tiles = [];
    Widget content;

    for (var item in BrandList) {
      double x = double.parse((50 * item["child"].length).toString()) + 40.0;
      heights.add(x);

      tiles.add(Stack(children: <Widget>[
        Align(
            alignment: Alignment.centerLeft,
            child: Container(
                height: 20,
                width: double.infinity,
                color: Colors.white,
                child: Padding(
                    padding: new EdgeInsets.fromLTRB(15, 5, 0, 0),
                    child: Text(item["title"])))),
        Align(
            alignment: Alignment.centerLeft,
            child: Container(height: x, child: buildcontent(item)))
        // new ListView(children: <Widget>[buildcontent(item)])))
      ])
          // new Container(
          //   //color: Colors.red,
          //   height: 50,
          //   width: double.infinity-50,

          //   child:
          //   new Padding(padding: new EdgeInsets.fromLTRB(10, 0, 0, 10),child:
          //   new Row(
          //     children: <Widget>[
          //       Image.asset('resource/images/jiance/carmodel1.jpeg',width: 100,height: 50,),
          //       Text(item["name"])
          //      //Image.network(item["pic_url"],width: 100,height: 30,)
          //     ]
          //   )),
          // )
          );
    }

    content = new Padding(
        padding: new EdgeInsets.fromLTRB(20, 0, 50, 10),
        child: new Column(
            children: tiles //重点在这里，因为用编辑器写Column生成的children后面会跟一个<Widget>[]，
            //此时如果我们直接把生成的tiles放在<Widget>[]中是会报一个类型不匹配的错误，把<Widget>[]删了就可以了
            ));
    return content;
  }

  Widget buildcontent(item) {
    List<Widget> tiles = [];
    Widget content;
    var list = item["child"];
    for (var items in list) {
      tiles.add(Padding(
          padding: new EdgeInsets.fromLTRB(0, 0, 0, 0),
          child: GestureDetector(
              onTap: () {
                param["value"] = items["name"];
                param["brand_id"] = items["id"];
                Navigator.of(context).pop(param);
                //  Navigator.pop(context);
              },
              child: Container(
                  color: Colors.white,
                  width: double.infinity,
                  height: 50,
                  child: new Row(children: <Widget>[
                    Padding(
                        padding: new EdgeInsets.fromLTRB(10, 0, 0, 0),
                        child: items['pic_url'] == ""
                            ? Image.asset(
                                'resource/images/jiance/carmodel1.jpeg',
                                width: 30,
                                height: 30,
                              )
                            : CachedNetworkImage(imageUrl: items['pic_url'],width: 30, height: 30)
                            // Image.network(items['pic_url'],
                            //     width: 30, height: 30)
                                ),
                    Padding(
                        padding: new EdgeInsets.fromLTRB(10, 0, 0, 0),
                        child: Text(items["name"]))
                    //Image.network(item["pic_url"],width: 100,height: 30,)
                  ])))));
    }
    content = new Padding(
        padding: new EdgeInsets.fromLTRB(0, 20, 0, 20),
        child: new Column(
            children: tiles //重点在这里，因为用编辑器写Column生成的children后面会跟一个<Widget>[]，
            //此时如果我们直接把生成的tiles放在<Widget>[]中是会报一个类型不匹配的错误，把<Widget>[]删了就可以了
            ));
    return content;
  }

  Widget indexbar() {
    List<Widget> tiles = [];
    Widget content;
    // var list = item["userList"];
    for (var i = 0; i < BrandList.length; i++) {
      var item = BrandList[i];
      tiles.add(Padding(
          padding: new EdgeInsets.fromLTRB(0, 0, 0, 0),
          child: GestureDetector(
              onTap: () {
                print('点击索引' + i.toString());
                double y = 0.0;
                for (var j = 0; j < heights.length; j++) {
                  // print(he)
                  if (j < i) y += heights[j];
                }
                print(y.toString());
                scrollController.animateTo(y,
                    duration: new Duration(seconds: 1), curve: Curves.ease);
              },
              child: Container(
                  // color: Colors.red,
                  width: 30,
                  height: 20,
                  child: Padding(
                      padding: new EdgeInsets.fromLTRB(0, 0, 0, 0),
                      child: Text(item["title"]))))));
    }
    content = new Padding(
        padding: new EdgeInsets.fromLTRB(0, 20, 0, 0),
        child: new Column(
            children: tiles //重点在这里，因为用编辑器写Column生成的children后面会跟一个<Widget>[]，
            //此时如果我们直接把生成的tiles放在<Widget>[]中是会报一个类型不匹配的错误，把<Widget>[]删了就可以了
            ));
    return content;
  }

  @override
  Widget build(BuildContext context) {
    thisContext = context;

    return
        //  WillPopScope(
        //     child:
        new Scaffold(
      appBar: new AppBar(
        titleSpacing:0,
        title: new Text('品牌',style: TextStyle(fontSize: Config.title_size),),
        backgroundColor: Colors.white,
        elevation: 0,
        // backgroundColor: Color.fromRGBO(255, 204, 48, 1),
      ),
      body: new Center(
          child: loaddata
              ? Container(
                  decoration: new BoxDecoration(
                    color: Colours.base_page_color
                   // color: Color.fromRGBO(238, 238, 238, 1),
                  ),
                  child: Padding(
                      padding: new EdgeInsets.fromLTRB(0, 15, 0, 0),
                      child: Stack(
                        children: <Widget>[
                          Align(
                            alignment: Alignment.centerLeft,
                            child: new ListView(
                                controller: scrollController,
                                children: <Widget>[layout()]),
                          ),
                          Align(
                              alignment: Alignment.topRight,
                              child: new Container(
                                width: 30,
                                child: indexbar(),
                              ))
                        ],
                      )
                      // new ListView(
                      //   children: <Widget>[buildcontent()],
                      // )),
                      ))
              : new SpinKitWanderingCubes(
                  color:Colours.app_main)),
      // onWillPop: () => willpop(),
    );
  }

  Future<bool> willpop() {
    Navigator.of(context).pop(param);
    return Future.value(true);
    // _showDialog();
    //  return Future.value(false);
  }
}

class Suspension extends StatelessWidget {
  final String tag;
  final double suspensionHeight;

  Suspension({this.tag, this.suspensionHeight});

  @override
  Widget build(BuildContext context) {
    return Offstage(
      child: new Container(
        child: new Text(
          "$tag",
        ),
        alignment: Alignment.centerLeft,
        margin: const EdgeInsets.only(left: 16.0),
        height: suspensionHeight,
      ),
      offstage: false,
    );
  }
}
// import 'package:flutter/material.dart';
// import 'package:magic_car/util/HttpHelper.dart';

// typedef void OnTouchCallback(int index);

// class BrandSelectRoute extends StatefulWidget {
//   final List data;
//   final double suspensionHeight;
//   final double itemHeight;

//   BrandSelectRoute(
//       {this.data, this.suspensionHeight = 20.0, this.itemHeight = 40.0});

//   @override
//   State createState() {
//     return new _ContactState();
//   }
// }

// class _ContactState extends State<BrandSelectRoute> {
//   ScrollController scrollController = new ScrollController();
//   List<String> indexTagList = new List();
//   List userList = new List();
//   int defaultIndex = 0;

//   @override
//   void initState() {
//     // TODO: implement initState
//     super.initState();
//     scrollController.addListener(() {
//       double position = scrollController.offset.toDouble();
//       int index = _computerIndex(position);
//       setState(() {
//         defaultIndex = index;
//       });
//     });

//     // setState(() {
//     //   userList = userList;
//     // });
//     loadData();
//   }

//   void loadData() {
//     userList.add({'tag': 'A'});
//     userList.add({'tag': 'B'});
//     userList.add({'tag': 'C'});
//     userList.add({'tag': 'D'});
//     userList.add({'tag': 'E'});
//     userList.add({'tag': 'F'});
//     userList.add({'tag': 'G'});
//     userList.add({'tag': 'H'});
//     userList.add({'tag': 'I'});
//     userList.add({'tag': 'J'});
//     userList.add({'tag': 'K'});
//     userList.add({'tag': 'L'});
//     userList.add({'tag': 'M'});
//     userList.add({'tag': 'N'});
//     userList.add({'tag': 'O'});
//     userList.add({'tag': 'P'});
//     userList.add({'tag': 'Q'});
//     userList.add({'tag': 'R'});
//     userList.add({'tag': 'S'});
//     userList.add({'tag': 'T'});
//     userList.add({'tag': 'U'});
//     userList.add({'tag': 'V'});
//     userList.add({'tag': 'W'});
//     userList.add({'tag': 'X'});
//     userList.add({'tag': 'Y'});
//     userList.add({'tag': 'Z'});
//     Map<String, String> map = new Map();

//     print(userList.length.toString());
//     List tempUser = userList;
//     HttpHelper.post(HttpHelper.API_Brand, (data) async {
//       //loadpage.close();
//       if (data != null) {
//         print(data);
//         //Toast.show(data["msg"], context);

//         if (data["code"].toString() == "1") {
//           print('1111');
//           List temp = data["info"];
//           List<dynamic> temp1 = [{'tag': 'A','userList':[]},
//           {'tag': 'B','userList':[]},
//           {'tag': 'C','userList':[]},
//           {'tag': 'D','userList':[]},
//           {'tag': 'E','userList':[]},
//           {'tag': 'F','userList':[]},
//           {'tag': 'G','userList':[]},
//           {'tag': 'H','userList':[]},
//           {'tag': 'I','userList':[]},
//           {'tag': 'J','userList':[]},
//           {'tag': 'K','userList':[]},
//           {'tag': 'L','userList':[]},
//           {'tag': 'M','userList':[]},
//           {'tag': 'N','userList':[]},
//           {'tag': 'O','userList':[]},
//           {'tag': 'P','userList':[]},
//           {'tag': 'Q','userList':[]},
//           {'tag': 'R','userList':[]},
//           {'tag': 'S','userList':[]},
//           {'tag': 'T','userList':[]},
//           {'tag': 'U','userList':[]},
//           {'tag': 'V','userList':[]},
//           {'tag': 'W','userList':[]},
//           {'tag': 'X','userList':[]},
//           {'tag': 'Y','userList':[]},
//           {'tag': 'Z','userList':[]},
//           ];
//           List tempre=[];
//           for (var i = 0; i < temp.length; i++) {
//             //print('111112343434');
//              var item = temp[i];

//               for (var tag in temp1) {
//                  print(tag["tag"]);
//                 if (tag["tag"] == item["initials"]) {
//                   tag["userList"].add(item);
//                 }
//               }
//             //}

//           }
//           print(temp1);
//           setState(() {
//             userList=temp1;
//           });
//         }
//       }
//     }, params: map);
//   }

//   @override
//   void dispose() {
//     scrollController.dispose();
//     // TODO: implement dispose
//     super.dispose();
//   }

//   void _initIndexBarData() {
//     indexTagList.clear();
//     widget.data?.forEach((v) {
//       indexTagList.add(v['tag'].toString().toUpperCase());
//     });
//   }

//   int _computerIndex(double position) {
//     if (widget.data != null) {
//       for (int i = 0; i < widget.data.length - 1; i++) {
//         double pre = _computerIndexPosition(i);
//         double next = _computerIndexPosition(i + 1);
//         if (position > pre && position < next) {
//           return i;
//         }
//       }
//     }
//     return 0;
//   }

//   double _computerIndexPosition(int index) {
//     int n = 0;
//     if (widget.data != null) {
//       for (int i = 0; i < index; i++) {
//         n += (widget.data[i]['userList'].length).toInt();
//       }
//     }
//     return n * widget.itemHeight + (index + 1) * widget.suspensionHeight;
//   }

//   void _initUserData() {
//     userList.clear();
//     widget.data?.forEach((user) {
//       userList.add(user);
//     });
//   }

//   void _onTouchCallback(int index) {
//     scrollController.jumpTo(_computerIndexPosition(index)
//         .clamp(.0, scrollController.position.maxScrollExtent));
//     setState(() {
//       defaultIndex = index;
//     });
//   }

//   @override
//   Widget build(BuildContext context) {
//     _initIndexBarData();
//     _initUserData();
//     Widget indexBar = new IndexBar(
//       data: indexTagList,
//       onTouchCallback: _onTouchCallback,
//     );

//     return new Stack(
//       children: <Widget>[
//         new Container(
//           child: new Column(
//             children: <Widget>[
//               new Container(
//                 child: new Text(
//                   indexTagList.isNotEmpty
//                       ? '${indexTagList[defaultIndex]}'
//                       : "A",
//                   textScaleFactor: 1.2,
//                 ),
//                 alignment: Alignment.centerLeft,
//                 margin: const EdgeInsets.only(
//                   left: 16.0,
//                 ),
//                 height: 40.0,
//               ),
//               new Expanded(
//                   child: new ListView.builder(
//                 itemBuilder: (context, index) {
//                   return new Column(
//                     children: <Widget>[
//                       new Suspension(
//                         tag: userList[index]['tag'].toString().toUpperCase(),
//                       ),
//                       new UserList(
//                         userList: userList[index]['userList'],
//                         itemHeight: widget.itemHeight,
//                       )
//                     ],
//                   );
//                 },
//                 itemCount: userList.length,
//                 controller: scrollController,
//               ))
//             ],
//           ),
//         ),
//         Align(
//           alignment: Alignment.centerRight,
//           child: new Container(
//             alignment: Alignment.center,
//             width: 30.0,
//             child: indexBar,
//           ),
//         ),
//       ],
//     );
//   }
// }

// class Suspension extends StatelessWidget {
//   final String tag;
//   final double suspensionHeight;

//   Suspension({this.tag, this.suspensionHeight});

//   @override
//   Widget build(BuildContext context) {
//     return Offstage(
//       child: new Container(
//         child: new Text(
//           "$tag",
//         ),
//         alignment: Alignment.centerLeft,
//         margin: const EdgeInsets.only(left: 16.0),
//         height: suspensionHeight,
//       ),
//       offstage: false,
//     );
//   }
// }

// class UserList extends StatefulWidget {
//   final List userList;
//   final double itemHeight;

//   UserList({this.userList, this.itemHeight});

//   @override
//   State createState() {
//     return new _UserListState();
//   }
// }

// class _UserListState extends State<UserList> {
//   List<Widget> children = new List();

//   void _initUserData() {
//     children.clear();
//     widget.userList?.forEach((v) {
//       children.add(new UserDetail(
//         userDetail: v,
//         itemHeight: widget.itemHeight,
//       ));
//     });
//   }

//   @override
//   Widget build(BuildContext context) {
//     _initUserData();
//     return new Column(
//       children: children,
//     );
//   }
// }

// class UserDetail extends StatefulWidget {
//   final Map userDetail;
//   final double itemHeight;

//   UserDetail({this.userDetail, this.itemHeight});

//   @override
//   State createState() {
//     return new _UserDetailState();
//   }
// }

// class _UserDetailState extends State<UserDetail> {
//   @override
//   Widget build(BuildContext context) {
//     return new GestureDetector(
//       onTap: () {},
//       child: new Container(
//         child: new ListTile(
//           title: new Text("${widget.userDetail['name']}"),
//         ),
//         height: widget.itemHeight,
//       ),
//     );
//   }
// }

// class IndexBar extends StatefulWidget {
//   final List<String> data;
//   final OnTouchCallback onTouchCallback;

//   IndexBar({this.data, this.onTouchCallback});

//   @override
//   State createState() {
//     return new _IndexBarState();
//   }
// }

// class _IndexBarState extends State<IndexBar> {
//   List<Widget> children = new List();

//   void _createWidget() {
//     children.clear();
//     widget.data?.forEach((v) {
//       children.add(SizedBox(
//         child: new Text(
//           '$v',
//           style: new TextStyle(
//             fontSize: 18.0,
//           ),
//         ),
//         height: 20.0,
//       ));
//     });
//   }

//   void _triggerTouch(int index) {
//     if (widget.onTouchCallback != null) {
//       widget.onTouchCallback(index);
//     }
//   }

//   @override
//   Widget build(BuildContext context) {
//     _createWidget();
//     return new GestureDetector(
//       onVerticalDragDown: (DragDownDetails details) {
//         int offset = details.globalPosition.dy.toInt();
//         RenderBox rb = context.findRenderObject();
//         int top = rb.localToGlobal(Offset.zero).dy.toInt();
//         _triggerTouch(((offset - top) / 20).floor());
//       },
//       onVerticalDragUpdate: (DragUpdateDetails details) {
//         int offset = details.globalPosition.dy.toInt();
//         RenderBox rb = context.findRenderObject();
//         int top = rb.localToGlobal(Offset.zero).dy.toInt();
//         int index = ((offset - top) / 20).floor();
//         _triggerTouch(index.clamp(.0, children.length - 1));
//       },
//       child: new Column(
//         mainAxisSize: MainAxisSize.min,
//         children: children,
//       ),
//     );
//   }
// }
